<template>
  <div class="ScaleBox backgroundimg">
    <div class="head backgroundimg">
      <div class="time">
        <div class="titleft">郑州天气：{{ tem }} {{ wea }}°C</div>
        <div>{{ timeNow }}</div>
      </div>
    </div>
    <div class="main">
      <div class="module1">
        <div class="info1 backgroundimg">
          <SCMpurchase />
        </div>
        <div class="info2 backgroundimg">
          <Warehouse />
        </div>
      </div>
      <div class="module2">
        <div class="info3 backgroundimg">
          <SalesRanking />
        </div>
        <div class="info4 backgroundimg">
          <TotalInventoryAmount />
        </div>
      </div>
      <div class="module3 backgroundimg">
        <div class="backgroundimg flexTilt">
          <span class="tltText">对接工厂数</span>
          <span class="tltText">对接门店数</span>
          <span class="btnText">{{ supplierCount }}</span>
          <span class="btnText">{{ storeCount }}</span>
        </div>
        <div class="backgroundimg flexTilt">
          <span class="tltText">昨日销售金额</span>
          <span class="tltText">今日销售金额</span>
          <span class="btnText">{{ yesterdayMoney ? yesterdayMoney.toFixed(2) : '0.00' }}</span>
          <span class="btnText">{{ todayMoney ? todayMoney.toFixed(2) : '0.00' }}</span>
        </div>
      </div>
      <div class="module4">
        <div class="top">
          <div class="info6 backgroundimg">
            <StoreSalesRanking />
          </div>
          <div class="info7 backgroundimg">
            <UserPurchaseData ref="userPurchaseData" />
          </div>
        </div>
        <div class="bottom">
          <div class="info8 backgroundimg">
            <TodayPurchaseData />
          </div>
          <div class="info9 backgroundimg">
            <SoldOutToday />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { getPageData } from "@/api/user";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket.js";
import { getSid, removeToken } from "@/utils/auth";
import SoldOutToday from "@/components/echarts/SoldOutToday";
import TodayPurchaseData from "@/components/echarts/TodayPurchaseData";
import StoreSalesRanking from "@/components/echarts/StoreSalesRanking";
import UserPurchaseData from "@/components/echarts/UserPurchaseData";
import SCMpurchase from "@/components/echarts/SCMpurchase";
import SalesRanking from "@/components/echarts/SalesRanking";
import TotalInventoryAmount from "@/components/echarts/TotalInventoryAmount";
import Warehouse from "@/components/echarts/Warehouse";
export default {
  components: {
    SoldOutToday,
    TodayPurchaseData,
    StoreSalesRanking,
    UserPurchaseData,
    SCMpurchase,
    SalesRanking,
    TotalInventoryAmount,
    Warehouse,
  },
  data() {
    return {
      timeNow: "",
      date: "",
      storeCount: null,
      supplierCount: null,
      todayMoney: null,
      yesterdayMoney: null,
      wea: '',
      tem: ''
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getPageData();
    });
    if (getSid()) {
      connectWebsocket(
        // 地址
        // "ws://192.168.3.37:9105/websocket/" + getSid(),
        // 'ws://8.141.7.66:9105/websocket/' + getSid(),
        process.env.VUE_APP_WEBSOCKET_URL + getSid(),
        // "ws://192.168.3.17:9105/websocket/" + getSid(),
        // "ws://test.yukukeji.com/ws/erp/websocket/" + getSid(),
        // 传递给后台的数据
        {},
        // 成功拿到后台返回的数据的回调函数
        (res) => {
          const datas = JSON.parse(res);
          // console.log(res, '拿到结果')
          if (datas.todayMoney) {
            const resultArr = datas.todayMoney;
            // console.log(datas, resultArr, "拿到结果钱钱");
            this.todayMoney = resultArr;
          }
          // if (datas?.supplyChainWebsocket) {
          //   this.$refs.userPurchaseData.changeScroll(datas.supplyChainWebsocket)
          // }
        },
        // websocket连接失败的回调函数
        (res) => {
          // console.log('失败的回调函数')
          console.log(res, "失败");
        }
      );
    } else {
      removeToken();
    }
    // window.addEventListener('resize', this.debounce(this.setScale))
    this.date = setInterval(this.getTime, 1000);
  },
  created() {
    this.getWeaAndTem();
  },
  beforeDestroy() {
    clearInterval(this.date);
  },
  methods: {
    async getPageData() {
      const res = await getPageData();
      // console.log(res)
      if (res.code === 200) {
        console.log(res.data, "页面数据");
        this.storeCount = res.data.storeCount;
        this.supplierCount = res.data.supplierCount;
        this.todayMoney = res.data.todayMoney;
        this.yesterdayMoney = res.data.yesterdayMoney;
      }
    },
    getWeaAndTem() {
      axios({
        methods: 'get',
        url: 'https://api.seniverse.com/v3/weather/now.json',
        headers: {},
        params: {
          key: 'S0iWKy23OH6dJRMdo',
          location: 'zhengzhou',
          language: 'zh-Hans',
          unit: 'c'
        },
      })
        .then((res) => {
          // const date = res.data.date;
          // const week = res.data.week;
          // this.dateAndWeek = date + week;
          this.wea = res.data.results[0].now.temperature;
          this.tem = res.data.results[0].now.text;
          // this.tem = res.data.tem;
          console.log('天气', res.data, this.wea, this.tem);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    debounce(fn, delay) {
      const delays = delay || 500;
      let timer;
      return function () {
        const th = this;
        const args = arguments;
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(function () {
          timer = null;
          fn.apply(th, args);
        }, delays);
      };
    },
    // 封裝格式化日期
    getTime() {
      var date = new Date(); // 获取当前时间
      var y = date.getFullYear();
      var m = date.getMonth() + 1; // 返回的0-11 所有加1
      var d = date.getDate();
      var x = date.getDay(); // 返回的是 0-6
      // 创建一个数组存储星期 返回值当索引进行调用
      var arr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      var h = date.getHours();
      h = h < 10 ? "0" + h : h; // 小于10时在前面补0 统一格式
      var mi = date.getMinutes();
      mi = mi < 10 ? "0" + mi : mi;
      var se = date.getSeconds();
      se = se < 10 ? "0" + se : se;
      this.timeNow =
        y +
        "-" +
        m +
        "-" +
        d +
        "   " +
        arr[x] +
        "     " +
        h +
        ":" +
        mi +
        ":" +
        se;
      if (h == "10" && mi == "00" && se == "00") {
        console.log("时间到了");
        location.reload();
      }
      // console.log(x)
      // return y + '年' + m + '月' + d + '日' + h + '小時' + mi + '分钟' + se + '秒' + arr[x]
    },
  },
};
</script>

<style lang="scss">
.ScaleBox {
  box-sizing: border-box;
  height: 2.8125rem;
  /* // padding-left: .1302rem; */
  background-image: url("../../assets/bg1.png");

  .head {
    /* // padding-left: 20px;
    // width: 100%; */
    height: 0.2448rem;
    background-image: url("../../assets/head1.png");
    z-index: 1;

    .titleft {
      font-size: 0.0417rem;
      font-family: D-DIN Exp;
      font-weight: 400;
      color: #39d6fe;
      width: 30%;
      padding-right: 5%;
      text-align: right;
      ;
    }

    .time {
      padding-top: 0.0469rem;
      // width: 10%;
      // margin-left: 73%;
      display: flex;
      justify-content: space-between;
      font-size: 0.0417rem;
      font-family: D-DIN Exp;
      font-weight: 400;
      color: #39d6fe;

      div:last-child {
        font-weight: bold;
        // margin-left: 13%;
        // text-align: center;
        padding-left: 2%;
        width: 30%;
      }
    }
  }

  .main {
    padding: 0 0.0521rem;
    height: 100%;
    margin: 0 auto;
    position: relative;
    display: flex;

    .module1 {
      .info1 {
        background-image: url("../../assets/info1.png");
        width: 2.0443rem;
        height: 1.2943rem;
        margin-bottom: 0.0781rem;
      }

      .info2 {
        background-image: url("../../assets/info2.png");
        width: 2.0443rem;
        height: 1.0599rem;
      }
    }

    .module2 {
      margin-left: 0.125rem;

      .info3 {
        background-image: url("../../assets/info3.png");
        width: 1.3828rem;
        height: 1.1745rem;
        margin-bottom: 0.0885rem;
      }

      .info4 {
        background-image: url("../../assets/info4.png");
        width: 1.3828rem;
        height: 1.1745rem;
      }
    }

    .module3 {
      width: 2.8646rem;
      height: 2.3099rem;
      padding-top: 0.1276rem;
      /* // background-image: url("../../assets/earth.png"); */
      background-position: 0 0.0781rem;
      margin-left: 0.138rem;
      margin-right: 0.138rem;
      display: flex;
      justify-content: space-between;

      .flexTilt {
        width: 0.875rem;
        height: 0.4375rem;
        display: flex;
        flex-wrap: wrap;
        padding-top: 0.0938rem;

        .tltText {
          width: 50%;
          font-size: 0.0521rem;
          font-weight: bold;
          color: #ffffff;
          text-align: center;
        }

        .btnText {
          width: 50%;
          font-size: 0.0885rem;
          color: #59ffce;
          text-align: center;
        }
      }

      >.flexTilt:first-child {
        background-image: url("../../assets/info5.png");
        /* // margin-right: .8464rem; */
      }

      >.flexTilt:last-child {
        background-image: url("../../assets/info5.png");
      }
    }

    .module4 {

      /* // flex: 2.4;
      // height: 100px;
      // background: green;
      // margin-left: .2734rem; */
      .top {
        height: 1.1745rem;
        margin-bottom: 0.1016rem;
        display: flex;

        .info6 {
          width: 0.888rem;
          height: 1.1745rem;
          background-image: url("../../assets/info6.png");
        }

        .info7 {
          height: 1.1745rem;
          width: 2.5807rem;
          margin-left: 0.1042rem;
          background-image: url("../../assets/info7.png");
        }
      }

      .bottom {
        height: 1.1745rem;
        /* // margin-top: 39px; */
        display: flex;

        .info8 {
          width: 2.6328rem;
          height: 1.1745rem;
          background-image: url("../../assets/info8.png");
        }

        .info9 {
          /* // padding-top: 100%; */
          box-sizing: border-box;
          height: 1.1745rem;
          color: #ffffff;
          width: 0.862rem;
          margin-left: 0.1042rem;
          background-image: url("../../assets/info9.png");
        }
      }
    }
  }
}

.backgroundimg {
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  /* // background-attachment: fixed; */
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
}

div {
  box-sizing: border-box;
}
</style>
